<html>
<head>
<style type="text/css">
body {
	margin: 0px;
	color: #404040;
	background-color: #E0E0E0;
}
a {
	text-decoration: none;
}
p {
	margin: 0px;
}
h1 {
	margin: 0px;
	text-align: center;
	font-family: sans-serif;
}
form {
	margin: 0px;
}

table {
	width: 100%;
	border-spacing: 0px;
}
table td {
	
}
table thead {
	font-family: sans-serif;
	font-weight: bold;
	text-align: center;
}
table tbody tr:nth-child(odd) {
	background-color: #E0E0E0;
}
table tbody td {
	text-align: center;
}
table tbody td:first-child {
	text-align: left;
}
table tbody td:last-child {
	text-align: right;
}
table button {
	width: 100%;
}
table img {
	ver tical-align: text-bottom;
}
table input {
	width: 100%;
}
table select {
	width: 100%;
}

#login {
	position: fixed;
	right: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px 10px 10px 20px;

	background: white;
	border: 1px solid black;
	border-width: 0px 0px 1px 1px;
	border-radius: 0px 0px 0px 10px;
}
#login li {
	display: block;
	text-align: right;
}
#login img {
	vertical-align: text-bottom;
}

.framed {
	background-color: white;
	width: 600px;
	padding: 20px 50px;
	border: 1px solid #404040;
	border-radius: 20px;
	margin: 20px auto;
}
</style>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript">
function buildTableTd(node) {
	var tableTd = document.createElement("td");
	tableTd.appendChild(node);
	return tableTd;
}
function buildLink(href, node) {
	var link = document.createElement("a");
	link.href = href;
	link.appendChild(node);
	return link;
}

function buildGameButton(gameInfo) {
	var button = document.createElement("button");
	button.appendChild(document.createTextNode(gameInfo.name));
//	button.name = gameInfo.key.name;
//	button.onclick = "location.href=game.jsp?id="+ gameInfo.key.name;
	return button;
}
function buildGameOpponents(gameInfo) {
	var opponents = document.createElement("td");
	for (var i = 0; i < gameInfo.players.length; ++i) {
		if (i != 0) opponents.appendChild(document.createTextNode(", "));
		var opponent = gameInfo.players[i];

		var href = "playerInfo.jsp?id="+ opponent.key.name;
		var text = document.createTextNode(opponent.name);
		opponents.appendChild(buildLink(href, text));
	}
	return opponents;
}
function buildGameInfo(gameInfo) {
	var gameInfoTr = document.createElement("tr");
	gameInfoTr.appendChild(buildTableTd(buildLink("map.html?id="+ gameInfo.key.name, buildGameButton(gameInfo))));
	gameInfoTr.appendChild(buildTableTd(document.createTextNode(gameInfo.status)));
	gameInfoTr.appendChild(buildGameOpponents(gameInfo));
	return gameInfoTr;
}
function appendGameInfo(gameInfo) {
	var GameInfo = document.getElementById('GameInfo');

	GameInfo.appendChild(gameInfo);
}

window.onload = function() {
//	var gameInfo = new Object();
//	gameInfo.name = "Mr Y's Game";
//	gameInfo.status = "Active";
//	gameInfo.opponents = ["Goofy", "Johnny Boy", "Xadist"];
//	document.getElementById("GameInfo").appendChild(buildGameInfo("x", "x", "x"));
//	document.getElementById("GameInfo").appendChild(buildGameInfoX(gameInfo));

	ajaxRequest("login.jsp", function(json, status) {
		if (status == 200) { //OK
			var id   = json.id;
			var name = json.name;
//			alert(id +":"+ name +":"+ json);

			var gamename = document.getElementById('NewGameName');
			gamename.value = name +"'s Game";

			var loginname = document.getElementById('LoginName');
//			loginname.value = name;
			loginname.innerHTML = name;
		}
		if (status == 401) { // Not logged in
			alert("login");
		}
	});

	ajaxRequest("gameInfo.jsp", function(json) {
		for (var i = 0; i < json.length; ++i) {
			var game = json[i];
			appendGameInfo(buildGameInfo(game));
		}
	});
}

function testUser(event, input) {
	var filter = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$/i;
	var img = document.getElementById(input.name);
	if (!img) return;
	if (filter.test(input.value)) {
		img.src = "/gfx/invitemail.png";
	} else {
		img.src = "/gfx/invitnone.png";
	}
}
</script>
</head>
<body>

<!--ul id="Login">
<li><input id="LoginName" name="name"/>
<li><input id="LoginPass" name="pass" type="password"/>
<li><button>Register</button> <input type="submit" value="Login"/>
<li>Username
<li><a href="login"><img src="/gfx/login.png" alt="Login"/></a>
<li><a href="logout"><img src="/gfx/logout.png" alt="Logout"/></a>
</ul-->

<div id="Login">
<span id="LoginName">Username</span>
<a href="login"><img src="/gfx/login.png" alt="Login"/></a>
<a href="logout"><img src="/gfx/logout.png" alt="Logout"/></a>
</div>

<div class="framed">
<h1>Welcome To Space Crack</h1>
<p>Space Crack is a friendly game of galactic domination. It allows quick 
head-to-head games and epic marathon games that strech over days, months and 
years.</p>
</div>

<div class="framed">
<h1>Current Games</h1>
<table>
<col width="150">
<col width="150">
<col width="300">

<thead>
<tr>
<td>Name</td>
<td>Status</td>
<td>Opponents</td>
</tr>
</thead>
<tbody id="GameInfo">
</tbody>
</table>
</div>

<div class="framed">
<h1>Send Invitation</h1>
<form action="sendInvitation.jsp" mode="post">
<table>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>
<col width="100"/>

<thead>
<tr>
<td colspan=3>Game Name</td>
<td colspan=3>Start Time</td>
</tr>
</thead>
<tbody>
<tr><!-- /Rumble/Battle/Gambit/Fight/.../Disagreement -->
<td colspan=3><input id="NewGameName" name="gamename" value="New Game"/></td>
<td colspan=3><input name="time" /></td>
</tbody>

<!--thead>
<tr>
<td colspan=2>Size</td>
<td colspan=2>Pace</td>
<td colspan=2>Visibility</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan=2><select name="size">
<option value="1">Tiny (12 Planets)</option>
<option value="2">Small (24 Planets)</option>
<option value="3">Medium (40 Planets)</option>
<option value="4">Large (60 Planets)</option>
<option value="5">Huge (84 Planets)</option>
</select></td>
<td colspan=2><select name="pace">
<option value="1">Turn-By-Turn</option>
<option value="2">Marathon (1 tick/day)</option>
<option value="3">Epic (1 tick/hour)</option>
<option value="4" selected>Standard (1 tick/minute)</option>
<option value="5">Quick (1 tick/10 seconds)</option>
</select></td>
<td colspan=2><select name="visibility">
<option value="1">Public (Open)</option>
<option value="2">Public (Closed)</option>
<option value="3">Private</option>
</select></tr>
</tbody-->

<thead>
<tr>
<td colspan=3>Username or Email</td>
<td colspan=3>Status</td>
</tr>
</thead>
</tbody>
<tr>
<td colspan=3><input name="user1" onkeyup="testUser(event, this)" value="Mr X"></td>
<td colspan=3><a href="user.jsp?user=0">Mr X</a> <img id="user1" src="/gfx/inviteuser.png" alt="U"/></td>
</tr>
<tr>
<td colspan=3><input name="user2" onkeyup="testUser(event, this)" value="Mr Z"></td>
<td colspan=3>Unrecognized user <img id="user2" src="/gfx/inviteunknown.png" alt="?"/></td>
</tr>
<tr>
<td colspan=3><input name="user3" onkeyup="testUser(event, this)" value="johnny.boy@mail.com"></td>
<td colspan=3>Not registered user <img id="user3" src="/gfx/invitemail.png" alt="I"/></td>
</tr>
<tr>
<td colspan=3><input name="user4" onkeyup="testUser(event, this)"/></td>
<td colspan=3><img id="user4" src="/gfx/invitnone.png" alt="X"/></td>
</tr>
<tr>
<td colspan=3><input name="user5" onkeyup="testUser(event, this)"/></td>
<td colspan=3><img id="user5" src="/gfx/invitnone.png" alt="X"/></td>
</tr>
<tr>
<td colspan=3><input name="user6" onkeyup="testUser(event, this)"/></td>
<td colspan=3><img id="user6" src="/gfx/invitnone.png" alt="X"/></td>
</tr>
<tr>
<td colspan=3><input name="user7" onkeyup="testUser(event, this)"/></td>
<td colspan=3><img id="user7" src="/gfx/invitnone.png" alt="X"/></td>
</tr>
<tr>
<td colspan=3><input name="user8" onkeyup="testUser(event, this)"/></td>
<td colspan=3><img id="user8" src="/gfx/invitnone.png" alt="X"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan=2></td>
<td colspan=2><input type="submit"/></td>
<td colspan=2></td>
</tr>
</tfoot>
</table>
</form>
</div>

</body>
</html>
